/* eslint-disable react/jsx-handler-names */
import { Form } from 'antd';
import React, { Fragment } from 'react';
import { ProductGroupSepC, AdvancedSearch, PrimaryC, FirstHeaderC, SecondHeaderC, DATA_ENTRY } from '../../../components';

class ProductGroupSepDemo extends React.Component {
  singe1 = ['28bfc1416fadb919016fb1480551005e', '38120ee0a19b43f0953033cbddb0ad85'];

  multy1 = ['28bfc1416fadb919016fb1480551005e', ['38120ee0a19b43f0953033cbddb0ad85', '1afda8c0399f45e19fda5036179575b1']];

  singe2 = ['028da06e43d94c38aec8951fec735a13', '160ceb0f7daf4a74b4ff89f3b38e37c2'];

  multy2 = ['028da06e43d94c38aec8951fec735a13', ['160ceb0f7daf4a74b4ff89f3b38e37c2', '42ac099886c141b29fba36018d7c939d']];

  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      init2: undefined,
      init4: undefined,
    };

    setTimeout(() => {
      this.setState({
        init2: this.singe1,
        init4: this.multy1,
      });
    }, 3000);
  }

  onClick1 = () => {
    this.state.ProductGroupSepC1.setSelect(this.singe2);
  };

  onClick11 = () => {
    this.state.ProductGroupSepC1.setSelect([null, null]);
  };

  onClick2 = () => {
    this.state.ProductGroupSepC2.setSelect(this.singe2);
  };

  onClick3 = () => {
    this.state.ProductGroupSepC3.setSelect(this.multy2);
  };

  onClick4 = () => {
    this.state.ProductGroupSepC4.setSelect(this.multy2);
  };

  onClick5 = () => {
    this.state.ProductGroupSepC5.setSelect(this.singe2);
  };

  onClick6 = () => {
    this.state.ProductGroupSepC6.setSelect(undefined);
  };

  onQuery = (e) => {
    console.log('查询', e);
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <Form ref={this.formRef} labelWrap={true}>
          <div style={{ width: '900px' }}>
            <FirstHeaderC title='单选' />
            <SecondHeaderC title='1. 同步初始化' />
            <ProductGroupSepC
              form={this.formRef.current}
              dataIndex={['product1', 'group1']}
              multipleGroup={false}
              initialValue={this.singe1}
              productOnChange={(e) => console.log('产品1', e)}
              groupOnChange={(e) => console.log('组合1', e)}
              onRef={(ref) => this.setState({ ProductGroupSepC1: ref })}
            />
            <PrimaryC onClick={this.onClick1} title='更改数据' />
            <PrimaryC onClick={this.onClick11} title='清空' />
            <SecondHeaderC title='2. 异步初始化' />
            <ProductGroupSepC
              form={this.formRef.current}
              dataIndex={['product2', 'group2']}
              multipleGroup={false}
              initialValue={this.state.init2}
              productOnChange={(e) => console.log('产品2', e)}
              groupOnChange={(e) => console.log('组合2', e)}
              onRef={(ref) => this.setState({ ProductGroupSepC2: ref })}
            />
            <PrimaryC onClick={this.onClick2} title='更改数据' />
            <SecondHeaderC title='3. 无初始化' />
            <ProductGroupSepC
              form={this.formRef.current}
              dataIndex={['product33', 'group33']}
              multipleGroup={false}
              productOnChange={(e) => console.log('产品3', e)}
              groupOnChange={(e) => console.log('组合3', e)}
              onRef={(ref) => this.setState({ ProductGroupSepC5: ref })}
            />
            <PrimaryC onClick={this.onClick5} title='更改数据' />

            <FirstHeaderC title='组合多选' topHeight={true} />
            <SecondHeaderC title='4. 同步初始化' />
            <ProductGroupSepC
              form={this.formRef.current}
              dataIndex={['product4', 'group4']}
              initialValue={this.multy1}
              multipleGroup={true}
              productOnChange={(e) => console.log('产品3', e)}
              groupOnChange={(e) => console.log('组合3', e)}
              onRef={(ref) => this.setState({ ProductGroupSepC3: ref })}
            />
            <PrimaryC onClick={this.onClick3} title='更改数据' />
            <SecondHeaderC title='5. 异步初始化' />
            <ProductGroupSepC
              form={this.formRef.current}
              dataIndex={['product5', 'group5']}
              initialValue={this.state.init4}
              multipleGroup={true}
              productOnChange={(e) => console.log('产品4', e)}
              groupOnChange={(e) => console.log('组合4', e)}
              onRef={(ref) => this.setState({ ProductGroupSepC4: ref })}
            />
            <PrimaryC onClick={this.onClick4} title='更改数据' />
            <SecondHeaderC title='6. 异步初始化(设置交易模式)' />
            <ProductGroupSepC
              form={this.formRef.current}
              multipleGroup={true}
              dataIndex={['product6', 'group6']}
              initialValue={this.state.init4}
              productOnChange={(e) => console.log('产品5', e)}
              groupOnChange={(e) => console.log('组合5', e)}
              tradeModel={['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL']} // 产品组定义不支持选估值解析模式的产品
            />
          </div>
        </Form>
        <FirstHeaderC title='查询组件' topHeight={true} />
        <AdvancedSearch
          initialValues={[]}
          dataSource={[
            {
              dataIndex: ['product7', 'group7'],
              type: DATA_ENTRY.PRODUCTGROUPSEP,
              multipleGroup: true,
              initialValue: this.multy1,
              onRef: (ref) => {
                this.setState({ ProductGroupSepC6: ref });
              },
            },
            {
              dataIndex: 'input4',
              title: '数字',
              type: DATA_ENTRY.INPUTNUMBER,
            },
            {
              dataIndex: 'input5',
              title: '数字',
              type: DATA_ENTRY.INPUTNUMBER,
            },
          ]}
          onQuery={this.onQuery}
        />
        <PrimaryC onClick={this.onClick6} title='更改数据' />
      </div>
    );
  }
}

export default ProductGroupSepDemo;
